<template>
	<view>
		<u-popup round="8" :show="show" @close="closeFn" mode="center">
			<view class="phonePop" >
				<view class="close" @click="closeFn">
					<u-icon name="close-circle" color="#fff" size="32" ></u-icon>
				</view>
				<view class="inner">
					<view class="imgcont">
						<image :src="ma[`${type}`]" mode="widthFix" class="img"></image>
					</view>
					<!-- <view class="name namecenter">
						如果你想继续使用该平台，请联系客服
					</view> -->
				</view>

				<view class="footer-btn ">
					<button open-type="contact" class="btn confirmbtn">
						联系客服
					</button>
					<!-- <view class="btn" @click="closeFn">
						关闭
					</view> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "ioskefu",
		props: ['type', 'show'],
		data() {
			return {
				ma: ''
			};
		},
		mounted() {
			this.getImages()
		},
		methods: {
			closeFn() {
				this.$emit('close')
			},
			handleSave() {
				this.downSaveImage(this.ma[`${this.type}`])
			},
			getImages() {
				this.$req.post('/shanghu/pingguohb', {}).then((res) => {
					let data = res.data.data

					this.ma = data
				})
			},
			downSaveImage(imgurl) {
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.writePhotosAlbum']) {
							// 已授权，直接保存图片
							uni.downloadFile({
								url: imgurl,
								success: (res) => {
									if (res.statusCode === 200) {
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.showToast({
													title: '已保存到相册',
													duration: 2000,
												})
											},
											fail: function() {
												uni.showToast({
													title: '保存失败，请稍后重试',
													icon: 'none',
												})
											},
										})
									}
								},
							})
						} else if (res.authSetting['scope.writePhotosAlbum'] === false) {
							// 用户已拒绝授权，提示用户授权
							uni.showModal({
								title: '提示',
								content: '您未授权保存图片到相册，是否前往设置页面进行授权？',
								success: function(res) {
									if (res.confirm) {
										uni.openSetting({
											success: function(res) {
												if (res.authSetting[
														'scope.writePhotosAlbum']) {
													uni.downloadFile({
														url: imgurl,
														success: (res) => {
															if (res
																.statusCode ===
																200) {
																uni.saveImageToPhotosAlbum({
																	filePath: res
																		.tempFilePath,
																	success: function() {
																		uni.showToast({
																			title: '已保存到相册',
																			duration: 2000,
																		})
																	},
																	fail: function() {
																		uni.showToast({
																			title: '保存失败，请稍后重试',
																			icon: 'none',
																		})
																	},
																})
															}
														},
													})
												}
											},
										})
									} else if (res.cancel) {
										uni.showToast({
											title: '您取消了授权',
											icon: 'none',
											duration: 2000,
										})
									}
								},
							})
						} else {
							// 用户第一次调用，调用授权接口
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.downloadFile({
										url: imgurl,
										success: (res) => {
											if (res.statusCode === 200) {
												uni.saveImageToPhotosAlbum({
													filePath: res.tempFilePath,
													success: function() {
														uni.showToast({
															title: '保存成功',
															duration: 2000,
														})
													},
													fail: function() {
														uni.showToast({
															title: '保存失败，请稍后重试',
															icon: 'none',
														})
													},
												})
											}
										},
									})
								},
								fail() {
									uni.showToast({
										title: '授权失败，请稍后重试',
										icon: 'none',
										duration: 2000,
									})
								},
							})
						}
					},
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.phonePop {
		width: 90vw;
		display: flex;
		flex-direction: column;
		// align-items: center;
		padding: 0 0 30rpx 0;
		height: 90vh;
		border-radius: 8px 8px 0 0;
		overflow: hidden;
		position: relative;
		.close{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 2;
		}

		.inner {
			flex: 1;
			overflow-y: scroll;
		}

		.imgcont {

			width: 100%;
			margin: 0 auto;

			.img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.tit {
			font-size: 30rpx;
			font-weight: 500;
			flex-shrink: 0;
			text-align: center;
		}

		.name {
			font-size: 28rpx;
			margin-top: 30rpx;
			flex: 1;
			padding: 0 20rpx;
		}

		.namecenter {
			text-align: center;
		}

		button {
			margin: 0;
			padding: 0;
			line-height: 35rpx;
			background-color: transparent;
		}

		button::after {
			border: none;
		}

		.footer-btn {
			flex-shrink: 0;
			padding: 30rpx 24rpx 0 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.btn {
				line-height: 35rpx;
				width: 100%;
				padding: 20rpx;
				border-radius: 8rpx;
				font-size: 30rpx;
				font-weight: 500;
				text-align: center;
				background-color: #f5f5f5;
			}

			.confirmbtn {
				background-color: #57bd6a;
				color: #fff;
			}
		}

		.btncenter {
			justify-content: center;
		}
	}
</style>